<template>
  <header class="header">
      <span class="back" v-if="goBack" @click="$router.go(-1)"><</span>
      <slot></slot>
      <span class="home" v-if="goHome" @click="$router.push('/')">home</span>
      <span class="login" v-if="goLogin">login</span>
  </header>
</template>

<script>
export default {
    props:{
        goBack:{
            type:Boolean,
            default:false
        },
        goHome:{
            type:Boolean,
            default:false
        },
        goLogin:{
            type:Boolean,
            default:false
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"> 
    .header{
        width:100%;
        height: 44px;
        background: #eee;
        border-bottom:1px solid gray;
        line-height: 44px;
        position: relative;
        .login,.home{
            width:44px;
            height: 44px;
            position: absolute;
            background: red;
            right:0;
            top:0;
            display: block;
        }
        .back{
            width:44px;
            height: 44px;
            position: absolute;
            background: red;
            left:0;
            top:0;
        }
    }
</style>
